<script setup>
import { ref, defineExpose, watch, defineProps } from 'vue'
import { ElForm, ElFormItem, ElInput, ElSelect, ElOption, ElCard, ElDialog, ElInputNumber, ElTable, ElTableColumn, ElButton, ElColorPicker } from 'element-plus'
const props = defineProps({
    options: {// 配置属性
        type: Object,
        default: () => ({})
    },
    apiList: {// 接口列表
        type: Array,
        default: () => []
    }
})


// 表格列数据
const columns = ref([
    { label: '', prop: '', width: '' },
])

// 弹窗的可见性
const dialogVisible = ref(false)

// 输入的 JSON 数据
const jsonInput = ref('')
const options = ref(props.options)
watch(() => props.options, (newValue, oldValue) => {
    if (newValue !== oldValue) {
        options.value = props.options
        columns.value = props.options.columns
    }
}, { deep: true,immediate: true })
const apiList = ref(props.apiList)
watch(() => props.apiList, (newValue, oldValue) => {
    if (newValue !== oldValue) {
        apiList.value = props.apiList
    }
})



// 新增一行
const addColumn = () => {
    columns.value.push({ label: '', prop: '', width: '' })
}

// 删除一行
const removeColumn = (index) => {
    columns.value.splice(index, 1)
}

// 打开弹窗
const openDialog = () => {
    dialogVisible.value = true
}

// 解析 JSON 并更新表格
const applyJson = () => {
    try {
        // 尝试解析输入的 JSON 字符串
        const parsedJson = JSON.parse(jsonInput.value)

        // 检查 JSON 是否符合预期格式（每一列包含 label 和 prop）
        if (Array.isArray(parsedJson) && parsedJson.every(item => item.label && item.prop)) {
            // 确保每列都有宽度，如果没有则给它一个默认宽度
            parsedJson.forEach(item => {
                if (!item.width) {
                    item.width = 'auto'  // 默认宽度为 'auto'，你也可以设置其他默认值
                }
            })

            columns.value = parsedJson
            dialogVisible.value = false
        } else {
            alert('JSON 格式不正确！请确保每一列包含 label 和 prop。')
        }
    } catch (e) {
        alert('无效的 JSON 格式！')
    }
}
watch(() => columns.value, (newValue, oldValue) => {
    options.value.columns = newValue
})
defineExpose({
    options: options
})
</script>

<template>
    <div class="_container_md">
        <el-form label-width="auto" style="max-width: 600px">
            <el-card>
                <el-form-item label="公共key" label-position="left">
                    <el-input v-model="options.commonKey" clearable />
                </el-form-item>
                <el-form-item label="接口列表" label-position="left">
                    <el-select v-model="options.apiList" clearable placeholder="请选择接口">
                        <el-option v-for="item in apiList" :key="item.url" :label="item.url" :value="item.url"
                            clearable />
                    </el-select>
                </el-form-item>
                <el-form-item label="接口轮巡时长(毫秒)" v-if="options.apiList && options.apiList.length" label-position="left">
                    <el-input-number v-model="options.intervalTime" :step="1" :min="0" controls-position="right" />
                </el-form-item>
            </el-card>
            <el-card style="margin-top: 20px;">
                <!-- 配置表格 -->
                <el-table :data="columns" border style="width: 100%" stripe>
                    <!-- 标题列 -->
                    <el-table-column label="标题">
                        <template v-slot="scope">
                            <el-input v-model="scope.row.label" size="small" placeholder="请输入标题"></el-input>
                        </template>
                    </el-table-column>

                    <!-- 字段列 -->
                    <el-table-column label="字段">
                        <template v-slot="scope">
                            <el-input v-model="scope.row.prop" size="small" placeholder="请输入字段"></el-input>
                        </template>
                    </el-table-column>

                    <!-- 宽度列 -->
                    <el-table-column label="宽度">
                        <template v-slot="scope">
                            <el-input v-model="scope.row.width" size="small" placeholder="请输入宽度"></el-input>
                        </template>
                    </el-table-column>

                    <!-- 操作列 -->
                    <el-table-column label="操作">
                        <template v-slot="scope">
                            <el-button size="small" type="danger" @click="removeColumn(scope.$index)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>

                <!-- 新增行按钮 -->
                <el-button type="primary" @click="addColumn" style="margin-top: 20px;">新增一行</el-button>

                <!-- 快捷按钮 -->
                <el-button type="success" @click="openDialog" style="margin-top: 20px;">快速配置</el-button>

            </el-card>
            <el-card style="margin-top: 20px;">
                <el-form-item label="宽度" label-position="left">
                    <el-input v-model="options.width" />
                </el-form-item>
                <el-form-item label="高度" label-position="left">
                    <el-input v-model="options.height" />
                </el-form-item>
                <el-form-item label="字体颜色" label-position="left">
                    <el-color-picker v-model="options.fontColor" />
                </el-form-item>
                <el-form-item label="边框颜色" label-position="left">
                    <el-color-picker v-model="options.borderColor" />
                </el-form-item>
            </el-card>
        </el-form>
        <!-- JSON 弹窗 -->
        <el-dialog title="输入 JSON 配置" v-model="dialogVisible" width="50%">
            <el-input type="textarea" v-model="jsonInput" rows="10" placeholder="请输入 JSON 格式的列配置"></el-input>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取消</el-button>
                <el-button type="primary" @click="applyJson">确定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<style scoped lang="scss">
.dialog-footer {
    margin-top: 20px;
}
</style>